<template>
  <div>
  <app-top></app-top>


    <addr></addr>


 <table id="t1" cellspacing="0" width="80%" v-if="cartList.length != 0">
      <tr id="ctr">
        <th>缩略图</th>
        <th>商品名称</th>
        <th>商品种类</th>
        <th>商品单价</th>
        <th>购买数量</th>
        <th>库存数量</th>
        <th>总价</th>
      
      </tr>

      <tr v-for="(item) in cartList" :key="item.id">
        <td>
          <img
            width="80px"
            height="100"
            :src="item.product.prodImage"
            class="prod"
          />
        </td>
        <td>{{ item.product.prodName }}</td>
        <td>{{ item.product.typeName }}</td>
        <td>￥{{ item.product.price }}</td>
        <td>
          {{item.buynum}}
        </td>

        <td>
          <span id="huo" v-if="item.product.pnum >= item.buynum">有货</span>
          <span id="huo" v-else>库存不足</span>
        </td>

        <td class="preTotal">￥{{ item.product.price * item.buynum }}</td>

        
      </tr>
    </table>

    <p v-if="totalPrice">
      <span id="totalPrice">总计:￥{{ totalPrice }}</span>
    </p>
   
  </div>
</template>

<script>
import AppTop from '@/components/home/AppTop.vue'
import addr from './addr.vue'

import { userCart} from "@/api/cart.js";
export default {
  data () {
    return {
    cartList: [],

      totalPrice: 0,
    }
  },

   created() {
    this.getList();
  },

  components: {AppTop,addr},

  methods: {
     getList() {
      userCart().then((resp) => {
        this.cartList = resp.data;
        this.totalPrice = this.jisuan();
      });
    },

     jisuan() {
      let sum = 0;
      for (let i = 0; i < this.cartList.length; i++) {
        let cart = this.cartList[i];
        sum += cart.buynum * cart.product.price;
      }
      return sum.toFixed(2);
    },
  }
}
</script>

<style scoped>
#ctr th {

  padding: 20px 20px;

  border-bottom: 1px #666 solid;
}

tr td{
  padding: 5px 0px;
}

.shang {
  border-bottom: 1px #666 solid;
  padding: 10px 0px;
}
.shang a{
  margin: 0px 10px;
  text-decoration: none;
}
.shang a:hover{
  text-decoration: underline;
}
.prod {
  border-radius: 5px;
}
table {
  margin: auto;
  text-align: center;

  border-bottom: 1px #666 solid;
}
p {
  text-align: right;
}

#totalPrice {
  color: red;
  font-size: 30px;
  margin-right: 180px;
}

</style>